import React, {useEffect, useState} from 'react';
import {Table, Switch, Button, Tooltip, Space, Form, Input, message} from "antd"
import {useAppDispatch} from "@/hooks";
import {
    changeQuery, delBatchRemoveAsync,
    getHospitalListAsync,
    getHospitalSetAsync,
    updateHospitalListByIdAsync,
    useSelectorHosp
} from "@/store/slice/hosp";
import {DeleteOutlined, FormOutlined} from "@ant-design/icons";
import {useSelectCommon} from "@/store/slice/common";
import {useNavigate} from "react-router-dom";
import {changeLoading} from "@/store/slice/common";
import {updateHospitalListById} from "@/api/hosp";
function HospitalList() {
    const [form] = Form.useForm();
    const dispatch = useAppDispatch();
    const {hospListList} = useSelectorHosp();
    const {pageInfo,loading} = useSelectCommon();
    const navigate = useNavigate();
    useEffect(() => {
        // dispatch(getHospitalListAsync(1, 4))
        dispatch(getHospitalListAsync(pageInfo.current, 4))
    },[])

    return (
        <div>
            <Space style={{marginBottom: 16}} >
                <Form
                    form={form}
                    name="basic"
                    initialValues={{ remember: true }}
                    layout={'inline'}//让表单横向排列
                    onFinish={(values) => {
                        dispatch(getHospitalListAsync(1, 4));
                    }}
                    autoComplete="off"
                >
                    <Form.Item
                        name="hosname"
                    >
                        <Input placeholder={'请输入医院名称'}/>
                    </Form.Item>

                    <Form.Item
                        name="hoscode"
                    >
                        <Input placeholder={'请输入医院编码'}/>
                    </Form.Item>

                    <Form.Item >
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                    <Form.Item >
                        <Button onClick={() => {
                            form.resetFields();//清空表单
                        }} htmlType="button">
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </Space>
            <Table
                loading={loading}
                rowSelection={{}}
                rowKey={"id"}
                /*增加表格边框*/
                bordered={true}
                //设置屏幕最大为1800
                scroll={{x:1800}}
                pagination={
                    {
                        ...pageInfo,
                        onChange(current, pageSize) {
                            dispatch(getHospitalListAsync(current, pageSize))
                        }
                    }
                }
                columns={[
                    {
                        align: "center",
                        width: 80,
                        title: '序号',
                        render(dataIndex,rows, index) {
                            // console.log(index)
                            return index+1;
                        }
                    },
                    {
                        align: "center",
                        ellipsis:true,// 超过宽度将自动省略
                        title: '医院名称',
                        dataIndex: 'hosname'
                    },
                    {
                        align: "center",
                        title: '医院编号',
                        dataIndex: 'hoscode'
                    },
                    {
                        align: "center",
                        title: '医院Logo',
                        width: 100,
                        render(dataIndex,rows, index) {
                            const  path = "data:image/png;base64," + rows.logoData;
                            return (
                                <img src={path} alt="" width ="50" height={50}/>
                            )
                        }
                    },
                    {
                        align: "center",
                        title: '是否上线',
                        // 0：未上线 1：已上线
                        dataIndex: 'status',
                        render(status,rows) {
                            return (
                                <Switch checked={status === 1} onChange={async () => {
                                    dispatch(changeLoading(true));
                                    await dispatch(updateHospitalListByIdAsync(rows.id, status === 0 ? 1: 0));
                                    dispatch(changeLoading(false));
                                }} />
                            )
                        }
                    },
                    {
                        align: "center",
                        title: '医院等级',
                        dataIndex: 'param',
                        render({hostypeString}) {
                            return  hostypeString;
                        }
                    },
                    {
                        title:"医院地址",
                        align:"center",
                        dataIndex:"param",
                        render({fullAddress}){
                            return fullAddress;
                        }
                    },
                    {
                        title:"创建时间",
                        align:"center",
                        dataIndex:"createTime"
                    },
                    {
                        align: "center",
                        fixed: "right",
                        title: '操作',
                        // dataIndex: 'id',
                        render(rows) {
                            return (
                                <Space>
                                    <Button onClick={() => {
                                        navigate('/hospital/show/'+ rows.id)
                                    }} type="primary" >查看</Button>

                                    <Button onClick={() => {
                                        navigate("/hospital/department/"+rows.hoscode)
                                    }} type="primary" >排班</Button>
                                </Space>
                            )
                        }
                    },

                ]}
                dataSource={hospListList}
            />
        </div>
    );
}

export default HospitalList;